<template>
  <div class="p-16px">
    <el-card>
      <div class="flex flex-wrap">
        <el-space class="mr-16px mb-16px">
          <div>设备编号：</div>
          <el-input
            v-model="params.deviceCode"
            placeholder="请输入内容"
          ></el-input>
        </el-space>
        <el-space class="mr-16px mb-16px">
          <div>设备名称：</div>
          <el-input
            v-model="params.deviceName"
            placeholder="请输入内容"
          ></el-input>
        </el-space>
        <el-space class="mr-16px mb-16px">
          <div>设备状态：</div>
          <el-input
            v-model="params.onlineStatus"
            placeholder="请输入内容"
          ></el-input>
        </el-space>
        <el-space class="mr-16px mb-16px">
          <div>硬件编号：</div>
          <el-input
            v-model="params.deviceSnCode"
            placeholder="请输入内容"
          ></el-input>
        </el-space>
        <el-space class="mr-16px mb-16px">
          <div>设备版本：</div>
          <el-input
            v-model="params.deviceVersion"
            placeholder="请输入内容"
          ></el-input>
        </el-space>
        <el-space class="mr-16px mb-16px">
          <el-button @click="handleSearch">搜索</el-button>
          <el-button type="primary" @click="handleCreate">新建</el-button>
          <el-button type="primary" plain @click="handleImport">导入</el-button>
          <el-button type="primary" plain @click="handleExport">导出</el-button>
        </el-space>
      </div>
    </el-card>
    <el-card class="mt-16px">
      <el-table
        :data="tableData"
        border
        stripe
        row-key="id"
        v-loading="loading"
      >
        <el-table-column
          prop="deviceCode"
          label="设备编号"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="deviceName"
          label="设备名称"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="belongDistributorName"
          label="代理商"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="deviceVersion"
          label="版本"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="onlineStatusName"
          label="在线状态"
          min-width="180"
        >
          <template #default="{ row }">
            <el-tag
              :type="row.onlineStatusName === '在线' ? 'success' : 'danger'"
            >
              {{ row.onlineStatusName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="lastOnlineTime"
          label="最近在线时间"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="deviceTypeName"
          label="设备类型"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="deviceSnCode"
          label="硬件编号"
          min-width="180"
        ></el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="handleDetail(row)">
              详情
            </el-button>
            <el-button type="text" size="small" @click="handleUpdate(row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-16px flex justify-end">
        <el-pagination
          v-model:current-page="params.current"
          v-model:page-size="params.size"
          layout="prev, pager, next"
          background
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog v-model="isShowDialog" :title="isEdit ? '编辑设备' : '新建设备'">
      <el-form label-width="80px">
        <el-form-item label="设备编号">
          <el-input
            v-model="form.deviceCode"
            placeholder="请输入设备编号"
            :disabled="isEdit"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input
            v-model="form.deviceName"
            placeholder="请输入设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="货道模板">
          <DeviceRoadTemplate
            v-model="form.freightRoadTemplateId"
            @changeLabel="handleFreightRoadTemplateChange"
            :disabled="isEdit"
          />
        </el-form-item>
        <el-form-item label="地址信息">
          <el-input
            v-model="form.deviceAddress"
            placeholder="请输入地址信息"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            v-model="form.contactPhone"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="代理商">
          <DistributorSelect
            v-model="form.belongDistributorId"
            @changeLabel="handleDistributorChange"
            :disabled="isEdit"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleSubmit"
            :loading="submitLoading"
          >
            提交
          </el-button>
          <el-button @click="isShowDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import dayjs from 'dayjs'
import { ref, onMounted, computed } from "vue";
import { useCommonStoreHook } from "@/store/modules/common";
import DeviceRoadTemplate from "@/components/Select/DeviceRoadTemplate.vue";
import DistributorSelect from "@/components/Select/DistributorSelect.vue";

const router = useRouter();
const commonStore = useCommonStoreHook();
const tableData = ref([]);
const defaultFormData = {
  deviceCode: "",
  deviceName: "",
  freightRoadTemplateId: "",
  freightRoadTemplateName: "",
  deviceAddress: "",
  contactPhone: "",
  belongDistributorId: "",
  belongDistributorName: "",
};
const form = ref({
  ...defaultFormData,
});
const isEdit = computed(() => {
  return form.value.id;
});
const isShowDialog = ref(false);
const loading = ref(false);
const submitLoading = ref(false);
const params = ref({
  current: 1,
  size: 10,
  deviceCode: "",
  deviceName: "",
  onlineStatus: "",
  deviceSnCode: "",
  deviceVersion: "",
});

const total = ref(0);

const handleFreightRoadTemplateChange = ({ label }) => {
  form.value.freightRoadTemplateName = label;
};

const handleDistributorChange = ({ label }) => {
  console.log(label);
  form.value.belongDistributorName = label;
};

const handleCurrentChange = (current) => {
  params.value.current = current;
  fetchDeviceList();
};

const fetchDeviceList = () => {
  loading.value = true;
  commonStore
    .getDeviceInfoPage(params.value)
    .then((res) => {
      tableData.value = res.records.map(item => ({
        ...item,
        lastOnlineTime: item.lastOnlineTime ? dayjs(item.lastOnlineTime).format('YYYY-MM-DD HH:mm:ss') : ""
      }));
      total.value = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleSearch = () => {
  params.value.current = 1;
  fetchDeviceList();
};
const handleCreate = () => {
  form.value = { ...defaultFormData };
  isShowDialog.value = true;
};
const handleUpdate = (row) => {
  form.value = { ...row };
  isShowDialog.value = true;
};
const handleDetail = (row) => {
  router.push({ name: "DeviceDetail", query: { deviceCode: row.deviceCode } });
};

const handleSubmit = () => {
  submitLoading.value = true;
  if (form.value.id) {
    commonStore
      .editDevice(form.value)
      .then(() => {
        fetchDeviceList();
        isShowDialog.value = false;
      })
      .finally(() => {
        submitLoading.value = false;
      });
  } else {
    commonStore
      .addDevice(form.value)
      .then(() => {
        fetchDeviceList();
        isShowDialog.value = false;
      })
      .finally(() => {
        submitLoading.value = false;
      });
  }
};

const handleImport = () => {
  console.log("导入");
};
const handleExport = () => {
  console.log("导出");
};

onMounted(() => {
  handleSearch();
});
</script>

<style lang="scss" scoped></style>
